<html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>个人资料</title>
    <link rel="stylesheet" type="text/css" th:href="@{css1/css.css}"  />
    <style type="text/css">
        .div-form{
            padding-top: 100px;
            margin-top: 100px;
            margin-left: 100px;
            width:600px;
            height:400px;
            background-color: lightgray;
        }
        .msg-form{
            width: 400px;
            height: 250px;
            margin-left: 30px;
            padding-left: 120px;
            padding-bottom: 50px;
            background-color: white;
        }
    </style>
</head>
<body>
<div class="wrap clearfix">
    <!-- left nav start -->
    <div class="index_left fl">
        <div th:align="center"><img class="u_img" width="100px" height="100px" th:src="@{${user.img_src}} "></div>
        <p class="p" style="text-align: center" th:text="${user.name}">用户名</p>
        <div class="nav">
            <ul>
                <li><a href="shouye">首页</a> </li>
                <li><a href="index" >课程浏览</a></li>
                <li><a href="list" >我的课程</a></li>
                <li><a href="show" >笔记</a></li>
                <li><a href="contact" >设置</a></li>
            </ul>
        </div>
    </div>
    <div class="index_right fr">
        <div class="div-form">
            <form class="msg-form" method="POST">
                <div class="form-item">
                    邮件：<input type="text"  id="email" readonly="true" th:value="${user.email}">
                </div><br/>

                <div class="form-item">
                    姓名：<input id="name" name="name" type="text" th:value="${user.name}">
                </div><br/>

                <div class="form-item">
                    昵称：<input id="nickname" name="nickname" type="text" th:value="${user.nickname}">
                </div><br/>

                <div class="form-item">
                    性别：<input id="sex" name="sex" type="text" th:value="${user.sex}">
                </div><br/>

                <div class="form-item">
                    联系方式：<input id="phone" name="phone" type="text" th:value="${user.phone}">
                </div><br/>

                <div class="form-item">
                    <button type="button" onclick="update_user(this)">更新信息</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    function update_user(self) {
        var email = document.getElementById("email").value;
        var name = document.getElementById("name").value;
        var sex = document.getElementById("sex").value;
        var phone = document.getElementById("phone").value;
        var nickname = document.getElementById("nickname").value;
        $.ajax({
            type:'POST',
            url:'update_user',
            data: {
                "email":email,
                "name":name,
                "sex":sex,
                "phone":phone,
                "nickname":nickname
            },
            dataType:"json",
            traditional:true,
            success: function (data) {
                if(data==1){
                    alert("更新成功！");
                    window.location.href="http://localhost:8080/contact";
                }

            },
            error:function(e){
                alert("信息更新失败，请检查网络！");
            }
        })

    }
</script>
</body>
</html>
